<template>
	<view class="">
		<view class="item bgw">
			<view class="flex">
				<template v-for="col in table">
					<view class="col-item" :style="[col.style]" v-if="col.key == 'actual_main_qty'">
						<input v-model="detail.actual_main_qty" type="number" placeholder="请输入" :maxlength="8"
							class="input_border_bottom" @input="value_input" @blur="value_blur"
							data-name="actual_main_qty" />
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'main_price'">
						<input v-model="detail.main_price" type="number" placeholder="请输入" :maxlength="8"
							class="input_border_bottom" @input="value_input" @blur="value_blur"
							data-name="main_price" />
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'action'">
						<view class="flex" style="justify-content:center;">
							<u-icon name="trash" color="#999999" size="16" @click="del"></u-icon>
						</view>
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'date'">
						<picker @change="bind_date_change" :value="date_index" mode="date" :start="startDate" :end="endDate" >
							<view class="flex">
								<view class="flex-1">
									{{detail.date || '请选择'}}
								</view>
								<view class="ml5">
									<u-icon name="arrow-down" color="#999999" size="14"></u-icon>
								</view>
							</view>
						</picker>
					</view>
					<view class="col-item" :style="[col.style]" v-else>
						{{detail[col.key]}}
					</view>
				</template>
			</view>
		</view>
		<view class="blank20"></view>
	</view>
</template>

<script>
	const formatPrice = (price) => {
		price = '' + price;
		price = price
			.replace(/\s*/g, "") //去除字符串内所有的空格
			.replace(/[^\-\d.]/g, '') // 清除“-”“数字”和“.”以外的字符
			.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
			.replace('.', '$#$')
			.replace(/\./g, '')
			.replace('$#$', '.')
			.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两个小数
		// if (price.indexOf('.') < 0 && price != '') {
		//     // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		//     price = parseFloat(price);
		// }
		// if (price[0] == '0' && price != '') {
		//     // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		//     price = parseFloat(price);
		// }
		if (price != '') {
			price = Number(price);
		}
		return price;
	};
	import {
		
	} from '@/common/api.js';
	export default {
		name: "item",
		props: {
			detail: Object,
			table: Array,
		},
		data() {
			return {
				loading: false,
				startDate:'',
				endDate:'',
				date_index:0
			};
		},
		watch: {
			detail: {
				handler(newVal, oldVal) {
					if (newVal.material_id != oldVal.material_id) {
						this.init();
					}
				},
				immediate: false,
				deep: true
			}
		},
		created() {
			this.init();
		},
		filters: {

		},
		computed: {
			
		},
		methods: {
			bind_date_change(e){
				// console.log(e);
				 this.detail.date = e.detail.value;
				 this.$emit("updata", this.detail);
			},
			init() {
				
			},
			value_input(e) {

			},
			value_blur(e) {
				let name = e.target.dataset.name;
				if ((this.detail[name] + '') != '') {
					let num = Number(this.detail[name]);
					this.detail[name] = num;
					this.$emit("updata", this.detail);
				}
			},
			del() {
				this.$emit("del", this.detail);
			},
			save() {

			},
		}

	}
</script>

<style>
	.label-item {
		text-align: right !important;
		width: 200upx;
	}
</style>